import React, { useContext, useState } from 'react'
import styles from './CartDetail.module.css'
import BackDrop from '@/components/UI/BackDrop/BackDrop'
import { AiFillDelete } from "react-icons/ai";
import CartContext from '@/store/cartContext';
import Food from '@/components/FoodList/Food/Food';
import Confirm from '@/components/UI/Confirm/Confirm';
function CartDetail() {
    const ctx = useContext(CartContext)
    const [showConfirm, setShowConfirm] = useState(false)
    //显示确认框
    const showConfiemHandler = () => {
        setShowConfirm(true)
    }
    const cancelHandler = (e) => {
        e.stopPropagation()
        setShowConfirm(false)
    }
    const okHandler = (e) => {
        ctx.cartDispatch({type:'Clear'})
        // ctx.clearfood()
        setShowConfirm(false)
        // e.stopPropagation()
    }

    return (
        <BackDrop>
            {showConfirm && <Confirm confirmText={'确认清空购物车吗？'} onCancel={cancelHandler} onOk={okHandler} />}
            <div className={styles.CartDetail} onClick={(e) => { e.stopPropagation() }}>
                <header className={styles.Header}>
                    <h2 className={styles.Title}>餐品详情</h2>
                    <div className={styles.Clear} onClick={showConfiemHandler}>
                        <AiFillDelete />
                        <span>清空购物车</span>
                    </div>
                </header>
                <div className={styles.FoodList}>
                    {/* 购物车信息 */}
                    {ctx.items.map(item => <Food
                        key={item.id}
                        food={item}
                        noDesc={false}
                    />)}
                </div>

            </div>
        </BackDrop>
    )
}

export default CartDetail